<template>
  <div>
    <el-select v-model="deviceId" clearable placeholder="请选择设备" filterable>
      <el-option v-for="device in deviceOptions" :key="device.id" :label="device.code" :value="device.id">
        <span style="float: left">{{ device.code }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ device.name }}</span>
      </el-option>     
    </el-select>
  </div>
</template>

<script>
import { getDeviceSimple } from "@/api/device/device"
export default {
  name: "SelectDevice",
  props: {
    value: {
      required: true
    }    
  },
  data() {
    return {
      deviceOptions: [],
      deviceId: this.value,
    }
  },
  watch: {
    value(newVal) {
      this.deviceId = newVal;
    },
    deviceId(newVal, oldVal){
      this.$emit("input", this.deviceId)
    }
  },
  created() {
    this.getDeviceListFun();
  },
  methods: {
    /** 查询工厂列表 */
    getDeviceListFun(){
      getDeviceSimple().then(response => {
        this.deviceOptions = response.data;
      })
    },
  }
};
</script>

